//变换
@mixin transform($transform){
  -webkit-transform: $transform;
  -ms-transform: $transform; // IE9 only
  -o-transform: $transform;
  transform: $transform;
}

//变换原点
@mixin transform-origin($origin){
  -webkit-transform-origin: $origin;
  -moz-transform-origin: $origin;
  -ms-transform-origin: $origin; // IE9 only
  transform-origin: $origin;
}

//隐藏被旋转的 div 元素的背面
//只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。
//Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。
//取值
//visible	背面是可见的。
//hidden	背面是不可见的。
@mixin backface-visibility($backface-visibility){
  -webkit-backface-visibility: $backface-visibility;
  backface-visibility: $backface-visibility;
}

//动画（IE 9 以及更早的版本不支持 animation 属性。）
@mixin animation($animation){
  -webkit-animation: $animation;
  animation: $animation;
}
//动画规定一个名称 @keyframes
@mixin animation-name($animation-name){
  -webkit-animation-name: $animation-name;
  animation-name: $animation-name;
}
//定义动画完成一个周期所需要的时间，以秒或毫秒计。
@mixin animation-duration($animation-duration){
  -webkit-animation-duration: $animation-duration;
  animation-duration: $animation-duration;
}
//规定动画的速度曲线
//取值
//linear	动画从头到尾的速度是相同的。
//ease	默认。动画以低速开始，然后加快，在结束前变慢。
//ease-in	动画以低速开始。
//ease-out	动画以低速结束。
//ease-in-out	动画以低速开始和结束。
//cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
@mixin animation-timing-function($timing-function){
  -webkit-animation-timing-function: $timing-function;
  animation-timing-function: $timing-function;
}
//定动画在播放之前或之后，其动画效果是否可见。
//none	不改变默认行为。
//forwards	当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
//backwards	在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
//both	向前和向后填充模式都被应用。
@mixin animation-fill-mode($animation-fill-mode){
  -webkit-animation-fill-mode: $animation-fill-mode;
  animation-fill-mode: $animation-fill-mode;
}
//定义动画何时开始
@mixin animation-delay($animation-delay){
  -webkit-animation-delay: $animation-delay; /* Safari ?? Chrome */
  -moz-animation-delay: $animation-delay; /* Firefox */
  animation-delay: $animation-delay; /* W3C ?? Opera */
}
//定义动画的播放次数。
@mixin animation-iteration-count($animation-iteration-count){
  animation-iteration-count: $animation-iteration-count;
  -moz-animation-iteration-count:$animation-iteration-count;
  -o-animation-iteration-count: $animation-iteration-count;
  -webkit-animation-iteration-count: $animation-iteration-count;
}
//定义是否应该轮流反向播放动画。
@mixin animation-direction($animation-direction){
  animation-direction: $animation-direction;
  -moz-animation-direction: $animation-direction;
  -o-animation-direction: $animation-direction;
  -webkit-animation-direction: $animation-direction;
}